<template>
    <div>
        <header>
            <van-icon name="arrow-left" @click="back"/>
            <span>小升初数学</span>
            <div></div>
        </header>
        <!---->
        <div class="wrap">
            <div class="select">
                <div style="display:flex;align-items: center">
                    <svg style="width:20px;" t="1599053332776" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="1788" width="200" height="200">
                        <path d="M209.92 203.264h604.16c11.776 0 20.992-9.728 20.992-20.992 0-11.264-9.216-20.48-20.48-20.992h-604.16c-11.776 0-20.992 9.216-20.992 20.48-0.512 11.776 8.704 21.504 20.48 21.504zM965.632 564.224l-130.56-226.304v-71.68c0-11.264-9.216-20.992-20.48-20.992h-604.16c-11.776 0-20.992 9.216-20.992 20.48v71.68l-130.56 226.304c-4.096 6.144-5.632 13.824-4.608 21.504v326.144c0 19.456 15.872 34.816 34.816 34.816h846.336c19.456 0 34.816-15.872 34.816-34.816V585.216c1.024-6.656-0.512-14.336-4.608-20.992z m-130.56-86.016l44.032 76.8h-44.032v-76.8zM231.424 288.256h561.152v266.752h-64c-17.408 0-32.256 12.8-34.816 30.208-6.656 43.008-29.184 82.432-62.464 110.592-33.28 28.672-75.264 44.032-119.296 44.032-44.032 0-86.016-15.36-119.808-44.032-32.768-27.648-54.272-66.048-61.952-108.032-1.024-17.92-15.872-32.256-34.304-32.768h-65.024V288.256z m-42.496 189.952v76.8h-44.032l44.032-76.8z m-64.512 398.336v-250.88h142.848c13.824 48.128 41.472 91.648 79.36 124.416 44.032 37.376 101.888 60.416 164.864 60.416 60.416 0 118.784-21.504 164.864-60.416 37.888-32.768 65.536-75.776 79.36-124.416h143.36v250.88h-774.656zM209.92 118.784h604.16c11.776 0 20.992-9.728 20.992-21.504 0-11.264-9.216-20.48-20.48-20.992H209.92c-11.264 0-20.992 9.216-20.992 20.48 0 12.288 9.216 21.504 20.992 22.016z"
                              p-id="1789" fill="#515151"></path>
                        <path d="M413.184 382.976v205.824c0 18.944-8.704 28.672-26.112 28.672h-21.504v-228.352c0-29.696 13.824-44.032 41.984-44.032h77.824v-14.336h50.176v14.336h119.808v38.4h-242.176z m108.544 167.424v-4.608c0-11.776-10.24-17.408-31.232-16.896h-34.816c-22.528 0-32.256-11.776-29.696-35.84l24.064-46.592h-25.088v-36.864h46.592l8.192-17.92h56.32l-9.728 17.92h126.976v36.864h-146.944l-22.528 44.032h38.4v-31.232h49.152v31.232h78.848v38.4h-78.848v21.504h82.432v36.864h-82.432v28.672h-49.152v-8.192c0-13.824-9.216-20.48-27.648-20.48h-70.656v-36.864h97.792z"
                              p-id="1790" fill="#515151"></path>
                    </svg>
                    <span>题库选择</span>
                </div>
                <svg @click="changeNum" style="width: 20px;" t="1599053447861" class="icon" viewBox="0 0 1024 1024"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2629" width="200" height="200">
                    <path d="M874.6752 512c0-51.50208 32.3328-95.13984 77.6448-112.5376a451.37408 451.37408 0 0 0-49.34144-119.2192c-44.42624 19.75296-98.08896 11.69408-134.45632-24.76544-36.36736-36.36736-44.42624-90.13248-24.66816-134.45632A453.56544 453.56544 0 0 0 624.53248 71.68C607.04256 116.992 563.4048 149.3248 512 149.3248c-51.50208 0-95.13984-32.3328-112.5376-77.6448a451.54304 451.54304 0 0 0-119.2192 49.34144c19.75296 44.42624 11.69408 98.08896-24.66816 134.45632-36.36736 36.36224-90.13248 44.42112-134.45632 24.76544A448.54784 448.54784 0 0 0 71.68 399.4624c45.312 17.49504 77.6448 61.1328 77.6448 112.5376 0 51.50208-32.3328 95.13984-77.6448 112.53248a451.64544 451.64544 0 0 0 49.34144 119.22432c44.42624-19.75808 98.08896-11.6992 134.45632 24.76544 36.36736 36.36736 44.42624 90.13248 24.66816 134.45632A453.5296 453.5296 0 0 0 399.4624 952.32c17.49504-45.312 61.1328-77.6448 112.5376-77.6448 51.50208 0 95.13984 32.3328 112.53248 77.6448a451.47648 451.47648 0 0 0 119.22432-49.34144c-19.75808-44.42624-11.6992-98.08896 24.66816-134.45632 36.36736-36.36736 90.12736-44.42624 134.4512-24.76544a448.48128 448.48128 0 0 0 49.43872-119.22432c-45.30688-17.39264-77.63968-61.0304-77.63968-112.53248zM512 632.88832c-66.73408 0-120.89344-54.15424-120.89344-120.88832S445.26592 391.10656 512 391.10656 632.88832 445.26592 632.88832 512 578.73408 632.88832 512 632.88832z"
                          fill="#2c2c2c" p-id="2630"></path>
                </svg>
            </div>

            <!--ti-->
            <div class="box" v-for="(item,index) in pointList" @click="gotoSt(item.id)" :key="index">
                <div class="box-li">
                    <div>
                        <svg style="margin-right: 5px" t="1599092769853" class="icon" viewBox="0 0 1024 1024"
                             version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="1756" width="200" height="200">
                            <path d="M480.799624 0h51.83996C788.319384 6.079995 1012.479209 227.039823 1023.9992 482.079623v38.87997C1025.439199 787.519385 788.799384 1024.4792 522.399592 1023.9992h-41.119968C230.23982 1011.999209 12.79999 795.039379 0 544.159575v-60.479953C10.559992 231.359819 228.799821 12.47999 480.799624 0M223.999825 464.159637v95.679926c191.99985 0.16 383.9997 0.16 575.99955 0v-95.679926c-191.99985-0.16-383.9997-0.16-575.99955 0z"
                                  fill="#999999" p-id="1757"></path>
                        </svg>
                        <span>{{item.name}}</span>
                    </div>
                    <div></div>
                    <div>
                        <span>{{item.finished_amount}}/{{item.question_amount}}</span>
                    </div>
                    <svg t="1599092867364" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2543" width="200" height="200">
                        <path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity="0" p-id="2544"></path>
                        <path d="M341.504 357.056a42.666667 42.666667 0 1 1 42.346667-74.090667l298.666666 170.666667c28.650667 16.384 28.650667 57.706667 0 74.090667l-298.666666 170.666666a42.666667 42.666667 0 1 1-42.346667-74.090666L575.36 490.666667l-233.813333-133.610667z"
                              fill="#6A687A" p-id="2545"></path>
                    </svg>
                </div>
                <div class="p-lp">
                    <span></span>
                </div>
            </div>
        </div>
        <van-popup class="popup" v-model="show" position="bottom" round>
            <div class="popup-top">考点专练设置</div>
            <div class="tip">设置考点专练出题数量</div>
            <p>
                <van-radio-group v-model="radio" @change="group" icon-size="20px" direction="horizontal">
                    <van-radio name="15">随机15道</van-radio>
                    <van-radio name="0">按顺序做题</van-radio>
                </van-radio-group>
            </p>
            <div @click="show=false" class="btn-primary">确定</div>
        </van-popup>
    </div>
</template>

<script>
    export default {
        name: "Point",
        data() {
            return {
                pointList: [],
                show: false,
                radio: localStorage.getItem('numRadio') || '0'
            }
        },
        mounted() {
            let classId = this.$route.query.classify_id;
            let id = this.$route.query.id

            this.$HTTP.exam(classId, id).then(res => {
                this.pointList = [...res.data.data]
                console.log(this.pointList)
            })
        },
        methods: {
            //选择刷题数量
            group() {
                // console.log(this.radio)
                localStorage.numRadio = this.radio
            },
            //选择刷题数量
            changeNum() {
                this.show = true
            },
            //回退
            back() {
                window.history.back();
            },
            gotoSt(a) {
                this.$router.push({
                    path: '/topic',
                    query: {
                        id: a,
                        num: this.radio
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .popup {
        p {
            width: 90%;
            margin: 40px auto;
            font-size: 30px;

            .van-radio-group {
                display: flex;
                justify-content: space-between;
            }

        }

        .popup-top {
            height: 100px;
            text-align: center;
            font-size: 35px;
            line-height: 100px;
            border-bottom: 1px solid #eee;
        }

        .tip {
            width: 95%;
            margin: 30px auto;
        }

        .btn-primary {
            color: #fff;
            background-color: #eb6100;
            text-align: center;
            font-size: 4.53333vw;
            padding: 4.53333vw 0;
        }
    }

    .box {
        width: 90%;
        margin: 30px 5%;
        border: 1px solid #9B9C9D;
        border-radius: 10px;
        position: relative;

        .p-lp {
            position: absolute;
            width: 80%;
            height: 8px;
            background-color: #eee;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%);
            overflow: hidden;
            border-radius: 10px;

            span {
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                width: 50%;
                height: 100%;
                background-color: #FD6717;
            }
        }

        .box-li {
            width: 95%;
            padding: 0 2.5%;
            display: flex;
            justify-content: space-between;
            height: 120px;
            align-items: center;

            div {
                display: flex;
            }

            svg {
                width: 30px;
                height: 5vw;
            }

        }
    }

    .select {
        width: 90%;
        margin: 0 5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
    }

    .wrap {
        margin-top: 100px;
        background-color: #fff;
        width: 100%;
        height: 160vw;
    }

    header {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        font-size: 4vw;
        top: 0;
        height: 11.73333vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 9;
        background: #fff;
        border-bottom: 1px solid #f0f2f5;

        span {
            width: 70%;
            text-align: center;
        }
    }
</style>